import React, { Fragment, memo} from "react";

import FormItem from "../formItem";
import { renderFormItem } from "../comitem/render";

const Index = ({ config, data }) => {
	// const [formArr, setFormArr] = useState([]);

	const getFormData = config => {
		const data = [
			{
				title: "",
				borderBottom: 0,
				children: []
			}
		];

		const content = config?.dataSource?.property?.content;

		if (content) {
			data[0].children = content;
		} else {
			console.log("dataSource content data is error ");
		}
		return data;
	};

	const formArr = getFormData(config);
	// console.log(data);

	return (
		<>
			{formArr &&
				formArr.map((item, index) => {
					return (
						<Fragment key={`item-${index}`}>
							<FormItem title={item.title} borderBottom={item.borderBottom} hideRow={item?.children?.length === 0}>
								{item.children &&
									item.children.map(cItem => {
										return <Fragment key={cItem.name}>{renderFormItem[cItem.type]?.(cItem, data)}</Fragment>;
									})}
							</FormItem>
						</Fragment>
					);
				})}
		</>
	);
};

export default memo(Index);
